<template>
  <view class="chat-container">
    <!-- 消息分类标签 -->
    <view class="tab-bar">
      <view 
        class="tab-item" 
        :class="{ active: tab === 'chats' }" 
        @click="tab = 'chats'"
      >
        互动消息
      </view>
      <view 
        class="tab-item" 
        :class="{ active: tab === 'official' }" 
        @click="tab = 'official'"
      >
        官方通知
      </view>
    </view>
	<view v-if="tab == 'chats'" style="display: flex;">
		<view class="search-bar">
			<input type="text" placeholder="请输入联系人名字搜索..." class="search-input">
		</view>
		<button type="primary" class="search-btn" @click="searchStudyRoom">查询</button>
	  </view>
    <!-- 消息列表 -->
    <scroll-view class="message-list" scroll-y>
      <view v-if="tab === 'chats' || tab === 'all'">
        <!-- 互动消息列表 -->
        <view class="chat-item" v-for="(item, index) in chatMessages" :key="index" @click="openChat(item)">
          <image :src="item.avatar" class="user-avatar"></u-avatar>
          <view class="chat-content">
            <view class="nickname">{{ item.nickname }}</view>
            <view class="last-message">{{ item.lastMessage }}</view>
          </view>
          <view class="time">{{ item.time }}</view>
          <view v-if="item.unreadCount > 0" class="unread-badge">{{ item.unreadCount }}</view>
        </view>
      </view>

      <view v-if="tab === 'official' || tab === 'all'">
        <!-- 官方通知列表 -->
        <view class="official-item" v-for="(item, index) in officialMessages" :key="index">
          <view class="official-content">
            <view class="title">{{ item.title }}</view>
            <view class="content">{{ item.content }}</view>
          </view>
          <view class="time">{{ item.time }}</view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				tab: 'chats',
				chatMessages: [{
						avatar: 'https://a.520gexing.com/uploads/allimg/2021042109/uqaqhuvavt0.jpg',
						nickname: 'Bella',
						lastMessage: '你在学习吗？',
						time: '2:15',
						unreadCount: 1
					},
					{
						avatar: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.vrCJZvN56Uc64hrWW9m14gAAAA?rs=1&pid=ImgDetMain',
						nickname: 'Bee',
						lastMessage: '好呀，我等你回答',
						time: '11:25'
					}
				],
				officialMessages: [{
					avatar: '/static/official-avatar.png',
					title: '系统通知',
					content: '新版本已上线，点击查看功能更新',
					time: '10:00'
				}]
			}
		},
		methods: {
			openChat(item) {
				uni.navigateTo({
					url: '/pages/chat-detail/chat-detail?userId=' + item.userId
				})
			},
			openAddContact() {
				uni.navigateTo({
					url: '/pages/add-contact/add-contact'
				})
			},
			sendGreeting() {
				uni.showToast({
					title: '打招呼功能触发',
					icon: 'none'
				})
			},
			showMenu() {
				uni.showActionSheet({
					itemList: ['设置', '帮助中心']
				})
			},
			openCamera() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log('选择图片:', res.tempFilePaths[0])
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chat-container {
		background: linear-gradient(45deg, #ffffff 0%, #68cc6b 99%, #f4f663 100%);
		padding: 20rpx;
		height: 100vh;
		box-sizing: border-box;

		.tab-bar {
			display: flex;
			justify-content: center;
			gap: 60rpx;
			margin-bottom: 30rpx;

			.tab-item {
				font-size: 32rpx;
				color: rgb(126, 131, 125);
				padding-bottom: 10rpx;
				border-bottom: 4rpx solid transparent;

				&.active {
					color: orange;
					border-color: #f4f663;
				}
			}
		}

		.search-section {
			background-color: #fff;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.search-input {
				padding: 20rpx;
				font-size: 28rpx;
			}
		}

		.message-list {
			.chat-item {
				display: flex;
				align-items: center;
				gap: 20rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.chat-content {
					flex: 1;

					.nickname {
						font-size: 32rpx;
						color: #333;
					}

					.last-message {
						font-size: 28rpx;
						color: #666;
						margin-top: 10rpx;
					}
				}

				.time {
					font-size: 24rpx;
					color: #999;
				}

				.unread-badge {
					background-color: #ff4d4f;
					color: #fff;
					padding: 4rpx 12rpx;
					border-radius: 100rpx;
					font-size: 20rpx;
				}
			}

			.official-item {
				display: flex;
				align-items: center;
				gap: 20rpx;
				padding: 20rpx;
				background-color: #fff;
				border-radius: 20rpx;
				margin-bottom: 20rpx;

				.official-content {
					flex: 1;

					.title {
						font-size: 32rpx;
						color: #333;
					}

					.content {
						font-size: 28rpx;
						color: #666;
						margin-top: 10rpx;
					}
				}

				.time {
					font-size: 24rpx;
					color: #999;
				}
			}
		}

		.user-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 30rpx;
			border: 1px solid #68cc6b;
		}

		.add-btn {
			font-size: 10rpx;
			background: linear-gradient(45deg, #dcff9a 0%, #84eb81 99%, #c3d618 100%);
			color: rgb(126, 131, 125);
			border-radius: 10px;
			border: none;
			width: 80px;
			margin-left: 5px;
			margin-bottom: 20rpx;
		}

		.search-bar {
			display: flex;
			align-items: center;
			background-color: white;
			padding: 5rpx;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			margin-left: 5px;
			box-shadow: 0 2rpx 8rpx rgba(255, 249, 66, 0.7);
			background: linear-gradient(45deg, #ffffff 0%, #d9ffdc 99%, #f6f6f6 100%);
		}

		.search-input {
			flex: 1;
			font-size: 28rpx;
			color: #666;
			width: 250px;
		}

		.search-btn {
			font-size: 28rpx;
			background: linear-gradient(45deg, #dcff9a 0%, #84eb81 99%, #c3d618 100%);
			color: rgb(126, 131, 125);
			margin-left: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 10px;
			border: none;

		}


	}
</style>